<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet"  type="text/css" href="../static/css/layui.css">
    <script src="../static/js/layui.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ></script>
    <script src="../static/js/provider.js"></script>
    <base href="/">

</head>
<body >
<div class="layui-fluid" style="padding: 0px">
    <div class="layui-row" >
        <div class="layui-panel " >
            <div style="padding: 25px;">仓库库存查询与管理</div>
        </div>
    </div>
    <div class="layui-row">
        <div class="demoTable">
            <!-------------------------------------->
            <!-------------------------------------->
            <!---------------这里是搜索添加-------------->
            <!-------------------------------------->
            <!-------------------------------------->
            <div class="layui-row">
                <div class="layui-col-md9">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;搜索ID：
                    <div class="layui-inline">
                        <input class="layui-input" name="pid" id="demoReload" autocomplete="off">
                    </div>
                    <button class="layui-btn" data-type="reload">搜索</button>
                    <button id="newone" class="layui-btn layui-btn-warm layui-btn-lg layui-layout-right">添加</button>
                    <script>
                        $("#newone").click(function (){
                            layer.prompt(function(value, index, elem){
                                alert(value); //得到value
                                layer.close(index);
                            });
                        })
                    </script>
                </div>
            </div>

        </div>

        <table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>
        <!-------------------------------------->
        <!-------------------------------------->
        <!---------------这里是编辑-------------->
        <!-------------------------------------->
        <!-------------------------------------->
        <script>
            layui.use(['table', 'util'], function(){
                var table = layui.table
                    ,util = layui.util;

                //监听单元格编辑
                table.on('edit(user)', function(obj){
                    var value = obj.value //得到修改后的值
                        ,data = obj.data //得到所在行所有键值
                        ,field = obj.field; //得到字段
                    $.ajax({
                        url: '/provider_return_table/',
                        data:{
                            id:data.pid,
                            clo:field,
                            val:value
                        },
                        type:'POST',
                          success:function (dataa){
                            console.log(dataa);
                        },

                        error:function (){
                            console.log("出错啦！");
                        }

                    })
                       layer.confirm('真的修改行么', function(index){
                        layer.msg('[ID: '+ data.pid +'] ' + field + ' 字段更改值为：'+ util.escape(value));
                        layer.close(index);
                    })

                });
            });
        </script>
        <!-------------------------------------->
        <!-------------------------------------->
        <!---------------这里是行toolbar-------------->
        <!-------------------------------------->
        <!-------------------------------------->


        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
        <script>
            layui.use('table', function(){
                var table = layui.table;

                //监听行工具事件
                table.on('tool(user)', function(obj){
                    var data = obj.data;
                    //console.log(obj)
                    if(obj.event === 'del'){
                        layer.confirm('真的删除行么', function(index){
                            obj.del();
                            layer.msg('删除成功！');
                            layer.close(index);

                        });
                    }
                });
            });
        </script>
        <!-------------------------------------->
        <!-------------------------------------->
        <!---------------这里是渲染和选择重载-------------->
        <!-------------------------------------->
        <!-------------------------------------->
        <script>
            layui.use('table', function(){
                var table = layui.table;

                //方法级渲染
                table.render({
                    elem: '#LAY_table_user'
                    ,url: 'provider/get_table'
                    ,defaultToolbar: []
                    ,cols: [[
                        ,{field:'pid', title: 'PID', width:70, sort: true, edit: 'text'}
                        ,{field:'pname', title: '用户名', width:80,edit: 'text'}
                        ,{field:'pgrade', title: 'Pgrade', width:80, sort: true,edit: 'text'}
                        ,{field:'paddress', title: 'Paddress', width:80,edit: 'text'}
                        ,{field:'ptelephone', title: 'Ptelephone',width: 400,edit: 'text'}
                        ,{field:'pemail', title: 'Pemail', sort: true, width:80,edit: 'text'}
                        ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                    ]]
                    ,id: 'testReload'
                    ,page: true
                    ,height: 520
                });

                var $ = layui.$, active = {
                    reload: function(){
                        var demoReload = $('#demoReload');

                        //执行重载
                        table.reload('testReload', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                            ,where: {
                                key: {
                                    pid: demoReload.val()
                                }
                            }
                        });
                    }
                };

                $('.demoTable .layui-btn').on('click', function(){
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });
            });
        </script>
    </div>

</div>


</body>
</html>